<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="/static/plugins/echarts.min.js" type="application/javascript"></script>
    <script src="/static/js/default.js" type="application/javascript"></script>
    <script src="/static/js/common.js" type="application/javascript"></script>
    <style>
        .container{
            width: 1200px;
        }
        .container h1{
            text-align: center;
        }
        .container div form{
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>修改页面</h1>
        <div>
            <form id="form" action="/person/save" novalidate class="needs-validation">
                <input type="hidden" name="id" id="id" value="{{ id }}">
                <div class="form-group">
                    <label class="col-sm-4">姓名：</label>
                    <div class="col-sm-8 form-row">
                        <div class="col">
                        <input type="text" class="form-control" id="name" name="name" value="{{ name }}" required validReg="^[\u4E00-\u9FA5]{2,4}$" validMessage="姓名必须为中文名"/>
                        </div>
                        <div class="col">
                        <label color="red">*</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4">性别：</label>
                    <div class="col-sm-8 form-row">
                        <div class="col">
                            <select class="form-control" id="gender" name="gender" required>
                                <option value="">-- 请选择 --</option>
                                <option value="1" {% if gender == 1 %}selected{% endif %}>男</option>
                                <option value="2" {% if gender == 2 %}selected{% endif %}>女</option>
                            </select>
                        </div>
                        <div class="col">
                        <label color="red">*</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4">年龄：</label>
                    <div class="col-sm-8 form-row">
                        <div class="col">
                        <input type="number" class="form-control" id="age" name="age" value="{{ age }}" required validReg="^(?:[1-9][0-9]?|1[01][0-9]|120)$" validMessage="年龄必须是1-120内的数字"/>
                        </div>
                        <div class="col">
                        <label color="red">*</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-primary" id="update" loading="true">修改数据</button>
                    <button type="button" class="btn btn-primary" id="list">列表数据</button>
                </div>
            </form>

        </div>
        <div>
            <ul class="list-unstyled">
                <li>交互：底层封装了ajax，调用方式：utils.post(请求地址，传递参数JSON，成功回调函数，异常回调函数，是否显示加载提示：默认为true)</li>
                <li>加载：底层封装了loading，调用方式：utils.btnLoading(按钮ID,是否显示加载提示:默认为true)  </li>
                <li>提示：底层封装了toast，调用方式：utils.toast(提示内容，提示标题：默认文字为提示)</li>
            </ul>
        </div>
    </div>

<script>
$(function(){

    $("#update").click(function(){
        if($("#name").val() == ''){
            utils.toast('姓名不能为空！')
            return ;
        }
        if($("#age").val() == ''){
            utils.toast('年龄不能为空！')
            return ;
        }
        utils.btnLoading('add')
        utils.post('/person/save',{'id' : $("#id").val() , 'name': $("#name").val(), 'gender' :$("#gender").val(),'age': $("#age").val()},function(result){
            utils.btnLoading('add', false)
            if(result.status == 'OK'){
                utils.toast(result.message)
            }
        },function () {

        },false)
    });

    $("#list").click(function(){
        location.href="/person/list";
    });
})

</script>
</body>
</html>